<template>
  <div class="weibo-quick-post">
    <div class="post-header">
      <span class="post-title">发布微博</span>
    </div>
    <el-input
        v-model="form.title"
        type="text"
        placeholder="帖子标题"
        class="post-input"
    />
    <el-input
        v-model="form.text"
        type="textarea"
        :rows="4"
        placeholder="有什么新鲜事想分享给大家？"
        class="post-input"
    />

    <div class="toolbar">
      <div class="tool-icons">
        <el-button type="text" class="tool-icon">
          <el-icon><Picture /></el-icon>
        </el-button>
        <el-upload drag style="width:100%"
                   action="/api/file/myboke"
                   :on-success="handleFileUploadSuccess"
        >
          <el-icon class="el-icon--upload"><upload-filled/></el-icon>
          <div class="el-upload__text">将文档拖拽到此处，或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持 jpg/png 格式， 大小不超过 5M</div>
          </template>
        </el-upload>
        <el-button type="text" class="tool-icon">
          <el-icon><VideoCamera /></el-icon>
        </el-button>
        <el-button type="text" class="tool-icon">
          <el-icon><ChatDotRound /></el-icon>
        </el-button>
        <el-button type="text" class="tool-icon">
          <el-icon><Document /></el-icon>
        </el-button>
      </div>

      <div class="post-actions">
        <el-select v-model="postScope" class="scope-select">
          <el-option label="公开" value="public" />
          <el-option label="好友圈" value="friends" />
          <el-option label="仅自己可见" value="private" />
        </el-select>

        <el-button
            type="primary"
            class="post-button"
            @click="submitPost"
        >
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const yhm=ref(userStore.yhm);
const id=ref(userStore.id);

console.log(yhm.value);
console.log(id.value);
import {ElMessage} from "element-plus";
import {
  Picture,
  VideoCamera,
  ChatDotRound,
  Document,
  More, UploadFilled
} from '@element-plus/icons-vue';
import axios from "axios";


const postScope = ref('public');

const form = ref({
  text: '',
  userId: id,
  time: '',
  url: '',
  title: '',

});

const handleFileUploadSuccess = (response, uploadFile, uploadFiles) => {
  // 获取所有已成功上传的文件名
  const allUrls = uploadFiles
      .map(file => file.response) // 获取每个文件的响应
      .filter(Boolean);          // 过滤掉未完成的

  form.value.url = allUrls.join(','); // 用逗号拼接多个URL
};
const emits = defineEmits(["closeDialog", "flushPage"]);
const submitPost = async () => {
  const {data} = await axios.post("/api/post", form.value);
  console.log(data);
  if(data>0){
    ElMessage.success('操作成功');
    // emits("flushPage");
    emits("closeDialog");
  }
  else{
    ElMessage.error('操作失败');
  }

};
</script>

<style scoped>
.weibo-quick-post {
  width: 600px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.post-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.post-input {
  margin: 16px 0;
}

:deep(.post-input .el-textarea__inner) {
  border: 1px solid #ff8200;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  min-height: 100px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.tool-icons {
  display: flex;
  gap: 8px;
}

.tool-icon {
  font-size: 20px;
  color: #666;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scope-select {
  width: 100px;
}

.post-button {
  background-color: #ff8200;
  border-color: #ff8200;
  padding: 8px 20px;
}

.post-button:hover {
  background-color: #e67300;
  border-color: #e67300;
}
</style>